<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>zTree 树插件快速入门</title>
    <link rel="stylesheet" th:href="@{/css/zTree/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/js/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.min.js}"></script>

    <script type="text/javascript">
        var setting = {};
        var zNodes = [{
            name: "父节点1 - 展开",
            open: true,
            children: [{
                name: "父节点11 - 折叠",
                children: [{
                    name: "叶子节点111"
                }, {
                    name: "叶子节点112"
                }, {
                    name: "叶子节点113"
                }, {
                    name: "叶子节点114"
                }]
            }, {
                name: "父节点12 - 折叠",
                children: [{
                    name: "叶子节点121"
                }, {
                    name: "叶子节点122"
                }, {
                    name: "叶子节点123"
                }, {
                    name: "叶子节点124"
                }]
            }, {
                name: "父节点13 - 没有子节点",
                isParent: true
            }]
        }, {
            name: "父节点2 - 折叠",
            children: [{
                name: "父节点21 - 展开",
                open: true,
                children: [{
                    name: "叶子节点211"
                }, {
                    name: "叶子节点212"
                }, {
                    name: "叶子节点213"
                }, {
                    name: "叶子节点214"
                }]
            }, {
                name: "父节点22 - 折叠",
                children: [{
                    name: "叶子节点221"
                }, {
                    name: "叶子节点222"
                }, {
                    name: "叶子节点223"
                }, {
                    name: "叶子节点224"
                }]
            }, ]
        }, {
            name: "父节点3 - 没有子节点",
            isParent: true
        }];

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

    </script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>